<template>
	<view>
		<view class="status" :style="{background: comBackground}"></view>
		<view class="header" v-if="navDisplay" :style="{background: comBackground}">
			<view class="back" @tap="goBack">
				<uni-icon v-if="hasLeft" type="arrowleft" size="27" :color="comColor"></uni-icon>
			</view> 
			<view class="middle grace-ellipsis" :style="{color: comColor}">{{title}}</view>
			<view class="icon-btn" @tap="onClickRight">
				<uni-icon v-if="hasRight" :type="icon" size="27" :color="comColor"></uni-icon>
			</view>
		</view>
		<!-- 占位 -->
		<view class="place" :style="{height: transHeight}"></view>
	</view>
</template>

<script>
	import uniIcon from '@/components/uni-icon/uni-icon.vue'
	export default {
		components: {
			uniIcon
		},
		props: {
			title: {
				type: String,
				default: ''
			},
			back: {
				type: String,
				default: ''
			},
			color: {
				type: String,
				default: 'black'
			},
			background: {
				type: String,
				default: 'white'
			},
			icon: {
				type: String,
				default: ''
			},
			opacity: {
				type: String,
				default: '1'
			}
		},
		computed: {
			comColor() {
				return this.color;
			},
			comBackground() {
				return this.background;
			},
			hasRight() {
				return this.icon !== '';
			},
			hasLeft() {
				return this.back !== 'none';
			},
			transHeight() {
				return this.opacity === '1' ? '44px' : '0';
			},
			navDisplay() {
				return this.opacity === '1' ? 'block' : 'none';
			}
		},
		methods: {
			goBack() {
				if(this.back === ''){
					uni.navigateBack()
				}else if(this.back === 'none'){
					
				}else{
					uni.navigateBack({
						delta: this.back
					});
				}
			},
			onClickRight() {
				this.$emit('click-right')
			}
		}
	}
</script>

<style lang="scss">
	.status {
		width: 100%;
		height: 0;
		position: fixed;
		z-index: 10;
		top: 0;
		/*  #ifdef  APP-PLUS  */
		height: var(--status-bar-height); //覆盖样式
		/*  #endif  */
	}
	
	.header {
		width: calc(100% - 6px);
		height: 30px;
		padding: 7px 3px;
		display: flex;
		align-items: center;
		position: fixed;
		overflow: hidden;
		top: 0;
		z-index: 10;
		/*  #ifdef  APP-PLUS  */
		top: var(--status-bar-height);
		/*  #endif  */
		
		.back {
			margin: 0 2px;
			width: 27px;
			height: 30px;
			flex-shrink: 0;
		}
		.middle {
			color: white;
			width: 80%;
			height: 44px;
			line-height: 44px;
			padding: 0 10%;
			font-size: 16px;
			text-align: center;
		}
		.icon-btn {
			margin: 0 2px;
			width: 27px;
			height: 30px;
			flex-shrink: 0;
			display: flex;
			justify-content: flex-end;
			.iconfont {
				color: white;
				width: 27px;
				height: 27px;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 21px;
			}
		}
	}
	.place {
		height: 44px;
		/*  #ifdef  APP-PLUS  */
		padding-top: var(--status-bar-height);
		/*  #endif  */
	}
</style>
